import React, { useEffect, useState } from "react";

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res.result;
    });
};

// useEffect用于处理副作用的
// useEffect实际上是给函数组件添加生命周期用的
const App = () => {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("tom");

  // console.log("init");

  // 不需要返回值
  // 如果只有一个函数作为参数，那么相当于componentDidMount和componentDidUpdate
  // 如果有第二个参数是一个空数组，那么相当于componentDidMount
  // 如果第二个参数不是空数组，类似于vue的watchEffect监听(一开始会执行，可以同时监听多个数据)

  // 如果在第一个函数里面返回函数，返回的函数就会在组件被销毁的时候调用
  // useEffect(() => {
  //   console.log(123);
  // }, [count, name]);

  // useEffect(() => {
  //   return () => {
  //     console.log(456);
  //   };
  // }, []);

  const [list, setList] = useState([]);
  useEffect(() => {
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     setList(res.result);
    //   });

    // getData().then((res) => {
    //   setList(res);
    // });

    // 请求数据就是在useEffect里面做，但是如果封装了请求函数，并且使用async，就需要改成自执行函数的方式
    (async () => {
      const res = await getData();
      setList(res);
    })();
  }, []);

  const [num, setNum] = useState(1);
  useEffect(() => {
    const timer = setInterval(() => {
      setNum((v) => v + 1);
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  // useEffect(() => {
  //   setTimeout(() => {
  //     setNum((v) => v + 1);
  //   }, 1000);
  // }, [num]);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <>
      <h2>useEffect</h2>
      <div>count: {count}</div>
      <button onClick={() => setCount((v) => v + 1)}>count++</button>
      <div>name: {name}</div>
      <button onClick={() => setName("rose")}>count++</button>
      <div>num: {num}</div>

      <hr />

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

const App2 = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      {show && <App />}- <button onClick={() => setShow(false)}>隐藏</button>
    </>
  );
};

export default App2;
